<template>
  <div>
    <h3 class="title">批量同步配置</h3>
    <div>
      <el-table :key="updateTable" border :data="data.jdbc" :height="300">
        <el-table-column prop="tableName" label="表名" />
        <el-table-column label="同步方式">
          <template slot-scope="scope">
            <el-select v-model="scope.row.syncType" placeholder="请选择类型">
              <el-option
                v-for="item in dict.type.data_sync_batch_type"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column prop="sortBy" label="排序方式">
          <template slot-scope="scope">
            <el-select v-model="scope.row.sortBy" placeholder="请选择排序方式">
              <el-option
                v-for="item in scope.row.sortBySelectList"
                :key="item"
                :label="item"
                :value="item"
              />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column prop="slice" label="切片数">
          <template slot-scope="scope">
            <el-autocomplete
              v-model="scope.row.slice"
              class="inline-input"
              :fetch-suggestions="querySliceSearch"
              placeholder="请输入切片数"
            />
          </template>
        </el-table-column>

        <el-table-column prop="sliceSize" label="切片大小">
          <template slot-scope="scope">
            <el-autocomplete
              v-model="scope.row.sliceSize"
              class="inline-input"
              :fetch-suggestions="querySliceSizeSearch"
              placeholder="请输入切片大小"
            />
          </template>
        </el-table-column>

        <el-table-column prop="pageSize" label="分页大小">
          <template slot-scope="scope">
            <el-autocomplete
              v-model="scope.row.pageSize"
              class="inline-input"
              :fetch-suggestions="queryPageSizeSearch"
              placeholder="请输入分页大小"
            />
          </template>
        </el-table-column>

        <el-table-column prop="last" label="偏移" />
      </el-table>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { databaseListDbColumns } from '@/api/console/datasourceInfo'

export default {
  name: 'TypeMapping',
  props: ['data'],
  dicts: [
    'data_sync_batch_type',
    'synchronous_batch_pagesize',
    'synchronous_batch_slice',
    'synchronous_batch_slicesize'
  ],
  data() {
    return {
      updateTable: null
    }
  },
  async mounted() {
    const { jdbc } = this.$props.data
    if (!jdbc) {
      Vue.set(this.$props.data, 'jdbc', [])
    }

    if (jdbc && jdbc.length > 0) {
      const arr = []
      const tableNames = []
      jdbc.forEach((f) => {
        tableNames.push(f.sourceName)
        arr.push({
          tableName: f.sourceName,
          syncType: 'FULL_SYNC',
          last: null,
          sortBy: f.sortBy || null,
          sortBySelectList: [],
          ...f
        })
      })
      const { data } = await databaseListDbColumns({
        databaseName: this.$props.data.sourceDatabase || this.$props.data.sourceDataSchema,
        id: this.$props.data.sourceId,
        tableNames
      })
      console.log(data, '8888')

      Object.keys(data.data).forEach((f) => {
        const findItem = arr.find((j) => j.tableName === f)
        if (!findItem.sortBy) {
          findItem.sortBy = data.data[f][0]
        }
        findItem.pageSize =
          findItem.pageSize ||
          this.dict.type.synchronous_batch_pagesize[0].value
        findItem.slice =
          findItem.slice || this.dict.type.synchronous_batch_slice[0].value
        findItem.sliceSize =
          findItem.sliceSize ||
          this.dict.type.synchronous_batch_slicesize[0].value
        findItem.sortBySelectList = data.data[f]
      })
      this.$props.data.jdbc = arr
      this.updateTable = Math.random()
    }
  },
  methods: {
    querySliceSearch(queryString, cb) {
      var sliceRestaurants = this.sliceRestaurants
      var results = queryString
        ? sliceRestaurants.filter(
          this.createFilter(sliceRestaurants, queryString)
        )
        : sliceRestaurants
      // 调用 callback 返回建议列表的数据
      cb(results)
    },
    querySliceSizeSearch(queryString, cb) {
      var sliceSizeRestaurants = this.sliceSizeRestaurants

      var results = queryString
        ? sliceSizeRestaurants.filter(
          this.createFilter(sliceSizeRestaurants, queryString)
        )
        : sliceSizeRestaurants
      // 调用 callback 返回建议列表的数据
      cb(results)
    },
    queryPageSizeSearch(queryString, cb) {
      var pageSizeRestaurants = this.pageSizeRestaurants

      var results = queryString
        ? pageSizeRestaurants.filter(
          this.createFilter(pageSizeRestaurants, queryString)
        )
        : pageSizeRestaurants
      // 调用 callback 返回建议列表的数据
      cb(results)
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-table .el-table__header-wrapper th {
  background-color: #fff;
}

.title {
  color: #333;
  font-size: 18px;
  line-height: 1.25;
  box-sizing: border-box;
  font-weight: 600;
  text-align: left;
  margin: 25px 0;
}
</style>
